/*
 * It overlays and spinners
*/

.it-overlay {
    -webkit-backdrop-filter: blur(48px);
    backdrop-filter: blur(48px);
    background: var(--main-surface-primary-op-0-8);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1112;
}

.it-loading-spinner {
    background-image: url('/transferit-loading.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 33px;
    border-radius: 50%;
    height: 80px;
    left: 50%;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    z-index: 1112;
}

.it-loading-spinner::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid var(--main-primary);
    animation: clockwiseSizeChanger 2s ease-in-out infinite;
}

.it-loading-spinner.inline {
    display: inline-flex;
    position: static;
    transform: translate(0, 0);
    z-index: 1;
}

.it-loading-spinner.md-size {
    background: none;
    height: 28px;
    width: 28px;
}

.it-loading-spinner.md-size::before {    
    border-width: 2.5px;
}

.it-loading-spinner.md-size.simplified::before {
    animation: rotation 1s linear infinite;
    border-color: transparent;
    border-bottom-color: var(--main-primary);
}

@keyframes clockwiseSizeChanger {
    0% {
        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
        border-color: rgba(24, 117, 255, 1);
        transform: rotate(45deg);
    }
    12.5% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
        border-color: rgba(24, 117, 255, 0.85);
    }
    25% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
        border-color: rgba(24, 117, 255, 0.7);
    }
    37.5% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
        border-color: rgba(24, 117, 255, 0.65);
    }
    50% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
        border-color: rgba(24, 117, 255, 0.5);
        transform: rotate(405deg);
    }
    62.5% {
        clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);
        border-color: rgba(24, 117, 255, 0.65);
    }
    75% {
        clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);
        border-color: rgba(24, 117, 255, 0.7);
    }
    87.5% {
        clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);
        border-color: rgba(24, 117, 255, 0.85);
    }
    100% {
        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
        border-color: rgba(24, 117, 255, 1);
        transform: rotate(770deg);
    }
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
